前言

今天的東西比較少程式，不過就是UIvs方法拉來拉去做連結，所以我盡量截圖讓開發過程能被描述的更具體。

Storyboard vs. SwiftUI

storyboard，也就是UIKit framework，將app的架構圖象化，算是可以在開發的時候直接看到畫面，跟程式有對照、連結。而近幾年又推出了SwiftUI，兩者都是處理UI的工具，如果使用swiftUI的話，專案本身是不包含storyboard的。總之，保守起見，還是先跟著影片所使用的storyboard唄XD

首先，我們來到main.storyboard，加入一個navigation controller。

Editor > Embed In > Navigation Controller

這個東西就是平常手機畫面下面一條，有一些icon，點選後會進入不同的畫面，如instagram來說，就是主頁/影片/個人頁面等等的。馬上變的完全不明確的描述 ლ(ಠ_ಠლ)

接著點選畫面右上角的加號
這邊可以加入新的元件，那我們新增一個UITableView，直接點選然後拖移到主畫面(不是剛剛加入的controller)當中。此時主畫面就有一個table了。

右鍵/兩指點選主畫面上方最左邊的選項以設定viewController對應到的元件。因為程式部分已經有先寫一個table，就將他拉到剛剛畫面中的table view，如下圖呈現。

此時我真是覺得太酷了，連開發ios app的過程都充滿了apple系列的手勢體驗。

接著要設定constraints。
我的理解是，因為現在諸多螢幕、就導致有諸多不同的螢幕大小要處理。透過constraints的限制與設定，就不需要在那邊自己一個個處理。

按照下圖的位置，點選icon，然後將上下左右每個邊都設定為0，table就會緊貼著邊界。

如果想瞭解更多設定的話，可以參考ios app dev官方教學: UIKit Essentials
Setting Constraints with Auto Layout

好，接下來繼續增加元件。
一樣右上方搜尋、新增bar button item，並將System Item設定為Add，就會從預設customized的文字變成加號。

好的。那麼這樣顯示的畫面基本上預設就完成了。此時可以按按看cmd+R(run)，去模擬器看畫面是否都正常。

可以看到table view一條條的顯示出來，然後右上角也如預期的呈現新增的按鈕。

結語

按下新增的按鈕時，我們希望可以執行新增的動作。因此我們要在程式方面加方法，然後並連結回今天新增的按鈕。明天會繼續實作～

若有任何指正或建議，歡迎留言 (゜▽゜;)

參考資源

Build To Do List App in Swift 5 (Xcode 12) - 2021 Beginners
簡介 SwiftUI & 用其建構一簡單的 App